<template>
  <div class="main-container">
    <el-container>
      <el-aside width="180px" class="custom-aside">
        <el-menu :default-openeds="['1']" class="custom-menu">
          <el-submenu index="1" class="custom-submenu">
            <template slot="title"><i class="el-icon-message"></i>面试安排管理</template>
            <el-menu-item index="1-1">
              <router-link to="/enterpriseInterview/SelectInterview">面试安排查看</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/enterpriseInterview/InsertInterview">面试安排添加</router-link>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "EnterpriseInterview"
}
</script>

<style scoped>
.main-container {
  height: 90vh; /* 确保主容器高度为视口高度 */
  display: flex;
}

.el-container {
  flex: 1; /* 使用 Flexbox 布局，确保子元素充满父容器 */
  display: flex;
}

.custom-aside {
  background-color: white;
  color: #dddddd;
  display: flex;
  flex-direction: column; /* 确保侧边栏内部垂直布局 */
}

.custom-menu {
  background-color: aquamarine;
  border-right: none;
  flex: 1; /* 确保菜单充满侧边栏 */
}

.custom-submenu {
  color: aquamarine;
}

.el-menu-item a {
  color: bisque;
  text-decoration: none;
}

.el-menu-item a:hover {
  color: #3498db;
}

.custom-submenu:hover {
  color: #3498db;
}

.custom-submenu.is-active,
.el-menu-item.is-active > a {
  color: #3498db;
}
</style>
